<template>
  <div>
    <a-modal v-model:visible="visible" :footer="false" :title="actInfo.name" fullscreen draggable modal-class="bg-[#f2f3f5]">
      <a-layout-content class="block lg:flex lg:justify-between">
        <div class="ma-content-block w-full lg:w-6/12 mt-3 p-4 bg-white">
          <a-tabs type="rounded">
            <a-tab-pane key="operation-log" title="项目信息">
              <ma-crud :options="crudInfo" :columns="columnsInfo" ref="crudInfoRef">
                <template #tableBeforeButtons>
                  <a-button
                      type="primary"
                      class="w-full lg:w-auto mt-2 lg:mt-0"
                      @click="openAddInfo(1)"
                  ><template #icon><icon-plus /></template>新增</a-button>

                </template>

                <template #operationBeforeExtend="{ record }">
                  <a-link @click="openEditInfo(record)"><icon-edit /> 编辑</a-link>
                  <a-link @click="deleteInfo(record)" status="danger"><icon-delete /> 删除</a-link>
                </template>
              </ma-crud>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="ma-content-block w-full lg:w-6/12 mt-3 p-4 ml-0 lg:ml-3 bg-white">
          <a-tabs type="rounded">
            <a-tab-pane key="operation-log" title="教程技巧">
              <ma-crud :options="crudJc" :columns="columnsJc" ref="crudJcRef">
                <template #tableBeforeButtons>
                  <a-button
                      type="primary"
                      class="w-full lg:w-auto mt-2 lg:mt-0"
                      @click="openAddInfo(2)"
                  ><template #icon><icon-plus /></template>新增</a-button>
                </template>

                <template #operationBeforeExtend="{ record }">
                  <a-link @click="openEditJc(record)"><icon-edit /> 编辑</a-link>
                  <a-link @click="deleteJc(record)" status="danger"><icon-delete /> 删除</a-link>
                </template>

              </ma-crud>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-layout-content>
    </a-modal>

    <editLc ref="editLcRef" @save-success="editLcSuccess"/>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import api from '@/api/prm/activity.js'
import { Message } from "@arco-design/web-vue";
import editLc from './editLc.vue';

const visible = ref(false)
const actInfo = ref({})
const crudInfoRef = ref()
const crudJcRef = ref()
const editLcRef = ref()

const open = (record) => {
  actInfo.value = record
  visible.value = true

  crudInfoRef.value.requestData()
  crudJcRef.value.requestData()
}

const openEditInfo = (record) => {
  editLcRef.value.open(record, 1)
}
const openEditJc = (record) => {
  editLcRef.value.open(record, 2)
}

const openAddInfo = (type) => {

  editLcRef.value.open({activity_id:actInfo.value.id, step_id:0}, type)
}


const editLcSuccess = () => {
  crudInfoRef.value.refresh()
}

const deleteInfo = (step) => {
  api.lcDelete({act_id: step.activity_id, step_id: step.step_id})
  crudInfoRef.value.refresh()
}
const deleteJc = (step) => {
  api.lcDelete({act_id: step.activity_id, step_id: step.step_id})
  crudJcRef.value.refresh()
}

const changeSort = async (value, id) => {
  const response = await api.updateByField({ id, value,field:'sort' })
  if (response.success) {
    Message.success(response.message)
  }
}

const crudInfo = reactive({
  autoRequest: false,
  api: api.lcList,
  showIndex: false,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 180,
  add: {show: false, api: api.lcAdd},
  edit: {show: false, api: api.lcEdit},
  delete: {show: false, api: api.lcDelete},
  formOption: {viewType: 'modal', width: 400},
  beforeRequest: (params) => {
    params.act_id = actInfo.value.id
    params.step_type=1
    return true
  },
  beforeAdd: (params) => {
    params.act_id = actInfo.value.id
    params.step_type=1
    return true
  }
})

const columnsInfo = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {title: '信息标题', dataIndex: 'title', commonRules: [{required: true, message: '必须填写任务名称'}]},
  {title: '排序', dataIndex: 'sort', formType: 'input-number', width: 200},
])


const crudJc = reactive({
  autoRequest: false,
  api: api.lcList,
  showIndex: false,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 180,
  add: {show: false, api: api.lcAdd},
  edit: {show: false, api: api.lcEdit},
  delete: {show: false, api: api.lcDelete},
  formOption: {viewType: 'modal', width: 400},
  beforeRequest: (params) => {
    params.act_id = actInfo.value.id
    params.step_type=2
    return true

  },
  beforeAdd: (params) => {
    params.act_id = actInfo.value.id
    params.step_type=2
    return true
  }
})

const columnsJc = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {title: '教程标题', dataIndex: 'title', formType: 'input', search: false},
  {title: '排序', dataIndex: 'sort', formType: 'input-number', width: 200},
])

defineExpose({ open })

</script>
